<template>
  <div id="app">
    <!-- TopBar -->
    <TopBar :key="num" />
    <!-- Heater -->
    <Header />
    <router-view @fn="changeNum"/>
    <!-- Footer -->
    <Footer />

    <Login v-show="isShowLoginModal" />

    <transition name="fade">
      <Toast v-show="isShowToast" />
    </transition>
  </div>
</template>

<script>
import { jingpingAPI } from "@/request/api";
import TopBar from "@/components/TopBar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
import { mapMutations, mapState } from "vuex";
export default {
  name: "HomeView",
  data() {
    return {
      num: 1,
    };
  },
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  created() {
    //这样的书写会有缺陷
    //1.请求头不能统一处理
    //2.不利于接口的统一管理
    //3.容易出现回调地狱
    

    // console.log("同步请求", res);
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.handleLoginModal.isShowLoginModal,
      isShowToast: (state) => state.handleToast.isShowToast,
    }),
  },
  methods: {
   changeNum(){
     this.num++
   }
  },

  // watch: {
  //   "$route.path": {
  //     header(newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //       // 让TopBar组件重载
       
  //         if (!localStorage.getItem("x-auth-token")) {
  //           this.num++;
  //         }
        
  //     },
  //   },
  // },
};
</script>


<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
</style>
